<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { getNewCarCluePage } from '../../api/newCarClue';
import AddNewCarClueForm from './components/addNewCarClueForm/index.vue'
import UpdateNewCarClueForm from './components/updateNewCarClueForm/index.vue'
import NewCarClueTable from './components/newCarClueTable/index.vue'
import {HttpStatusCode} from "axios";
import {ElMessage} from "element-plus";

const showAddBox = ref(false)
const showEditBox = ref(false)
let clueList = ref<ListNewCarClue[]>([])
const clueName = ref('')
let updateClue = ref<ListNewCarClue>()
const pagination = reactive<Page>({})
let loading = ref(false)
const tableRef = ref()

onMounted(() => {
  getData(1, clueName.value)
})

const changeShowAddBox = () => {
  showAddBox.value = !showAddBox.value
}
const changeShowEditBox = (formData: ListNewCarClue) => {
  showEditBox.value = !showEditBox.value
  updateClue.value = formData
}
const cancelEditBox = () => {
  showEditBox.value = !showEditBox.value
}
const getData = async (page: number, clueName: string) => {
  loading.value = true
  const res = await getNewCarCluePage(page, clueName)
  if(res.statusCode === HttpStatusCode.Ok) {
    clueList.value = res.data.data as ListNewCarClue[]
    pagination.current = page
    pagination.total = res.data.total
    pagination.pageSize = res.data.pageRow
    loading.value = false
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }

}
const searchClue = () => {
  getData(1, clueName.value)
}
const handleChange = (val: number) => {
  getData(val, clueName.value)
}
const manyDel = () => {
  tableRef.value.delMany()
}
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="search">
        <el-input class="searchInp" clearable v-model="clueName" placeholder="输入线索名称">
        </el-input>
        <el-button class="searchBtn" type="primary" @click="searchClue">搜索</el-button>
      </div>
      <div class="btnGroup">
        <el-button class="addBtn" type="success" @click="changeShowAddBox">添加线索</el-button>
        <el-button class="addBtn" type="danger" @click="manyDel">删除线索</el-button>
      </div>
    </div>
    <div class="table">
      <NewCarClueTable ref="tableRef" :clue-list="clueList" :loading="loading" @increase="getData" @updateData="changeShowEditBox" />
      <el-pagination
          class="pag"
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :current-page="pagination.current"
          @current-change="handleChange"
      />
    </div>
    <el-drawer
        v-model="showAddBox"
        title="添加新车线索"
        direction="rtl"
    >
      <!--    添加表单-->
      <AddNewCarClueForm @increase="getData" @closeShow="changeShowAddBox"  />
    </el-drawer>
    <el-drawer
        v-model="showEditBox"
        title="修改个人车源"
        direction="rtl"
    >
      <!--    修改表单 UpdatePersonalChannelForm-->
      <UpdateNewCarClueForm @increase="getData" @closeShow="cancelEditBox" :clue-form="updateClue" />
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .header {
    width: 95%;
    height: 60px;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .search {
      margin-left: 20px;
      display: flex;
      align-items: center;
      .searchInp {
        width: 300px;
      }
      .searchBtn {
        margin-left: 10px;
      }
    }
    .btnGroup {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }

  }
  .table {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pag {
      margin-top: 20px;
    }
  }
}
</style>